<!--
 * @description 组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<view
		class="pure-notify"
		:class="_classes"
		:style="_styles"
		:hover-class="hoverClass"
		@tap="_handleClick"
	>
		<slot>
			{{ _config?.message }}
		</slot>
	</view>
</template>

<script>
	import commonComponentOptions from "../../config/options";
	export default {
		options: commonComponentOptions
	};
</script>

<script setup>
	import { ref, computed } from "vue";
	import props from "./props";
	import { getThemeValue } from "../../utils";

	// -------------------------------------------------------------------------------- Refs
	// 状态
	// enter 进入
	// leave 离开
	const _status = ref("");

	// 默认配置
	const _defaultConfig = {
		message: "通知消息",
		theme: "primary",
		position: "top",
		duration: 2500,
		top: 0,
		bottom: 0
	};

	// 最终配置
	const _config = ref({
		..._defaultConfig
	});

	// -------------------------------------------------------------------------------- Props
	const _props = defineProps(props);

	// -------------------------------------------------------------------------------- Emits
	const _emits = defineEmits(["onClick"]);

	// -------------------------------------------------------------------------------- Classes
	const _classes = computed(() => {
		const array = [];

		// 主题
		if (_config.value.theme) array.push(`pure-notify--theme pure-notify--theme--${_config.value.theme}`);

		// 位置
		if (_config.value.position) array.push(`pure-notify--${_config.value.position}`);

		// 状态
		if (_status.value) array.push(`pure-notify--${_status.value}-${_config.value.position}`);

		return array;
	});

	// -------------------------------------------------------------------------------- Styles
	const _styles = computed(() => {
		const array = [];

		// 主题
		if (_config.value.theme) array.push(`--pure-notify-theme: ${getThemeValue(_config.value.theme)}`);

		// 位置
		if (_config.value.top) array.push(`--pure-notify-top: ${_config.value.top}`);
		if (_config.value.bottom) array.push(`--pure-notify-bottom: ${_config.value.bottom}`);

		return array;
	});

	// -------------------------------------------------------------------------------- Events
	// 点击事件
	function _handleClick() {
		_emits("onClick");
	}

	// 显示
	let _timer = null;
	async function _show(config = {}) {
		// 合并配置
		_config.value = { ..._defaultConfig, ...config };

		// 设置状态
		_status.value = "enter";

		// 正在显示时清除定时器
		if (_timer) {
			clearTimeout(_timer);
			_timer = null;
		}

		// 指定时间后关闭
		_timer = setTimeout(() => {
			_status.value = "leave";
		}, _config.value?.duration);
	}

	defineExpose({
		show: _show
	});
</script>

<style scoped lang="scss">
	@import "./style.scss";
</style>
